<template>
  <f7-page>
    <qm-currentcy-navbar title="选择日期">
      <template #nav-right>
        <f7-icon f7="ellipsis"></f7-icon>
      </template>
    </qm-currentcy-navbar>
    <!-- <f7-list-input label="输入日期"  @click.native="open" v-model="value"></f7-list-input> -->
    <f7-block>
      <qm-field
        label="选择日期"
        placeholder="请选择"
        readonly
        input-align="right"
        :is-link="true"
        @click="open"
        v-model="value"
      >
      </qm-field>
    </f7-block>
    <f7-actions ref="datetimePicker" class="action">
      <f7-actions-group>
        <qm-datetime-picker
          title="选择日期"
          :formatter="formatter"
          :min-date="minDate"
          :max-date="maxDate"
          v-model="currentDate"
          item-height="50"
          type="year-month"
          @confirm="confirm"
          @cancel="cancel"
        ></qm-datetime-picker>
      </f7-actions-group>
    </f7-actions>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      minDate: new Date(1900, 1, 1),
      maxDate: new Date(2100, 12, 31),
      currentDate: new Date(),
      value: "",
    };
  },
  methods: {
    open() {
      console.log("open");
      this.$refs.datetimePicker.open();
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      return val;
    },
    confirm(val) {
      console.log(val);
      this.value = `${val.getFullYear()}年${val.getMonth() + 1}月`;
      this.cancel();
    },
    cancel() {
      this.$refs.datetimePicker.close();
    },
  },
};
</script>

<style lang="less" scoped>
.actions-modal {
  border-radius: calc(16px * var(--ratio)) calc(16px * var(--ratio)) 0 0;
  overflow: hidden;
}
</style>
